<template>
  <div class="order_strategy">
    <el-tabs v-model="activeName" class="other-tabs" @tab-click="switchTabs">
      <el-tab-pane label="工单客服" name="team">
        <TeamList ref="teamList" />
      </el-tab-pane>
      <el-tab-pane label="工单预警" name="warn">
        <WarnList ref="warnList" />
      </el-tab-pane>
      <el-tab-pane label="工单级别" name="level">
        <LevelList ref="levelList" />
      </el-tab-pane>
      <el-tab-pane label="工单来源" name="source">
        <source-list ref="sourceListInstance"></source-list>
      </el-tab-pane>
      <el-tab-pane label="质保类别" name="warrantyCategory">
        <warranty-category-list ref="warrantyCategoryListInstance" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
  import TeamList from '../TeamList/index.vue'
  import WarnList from '../WarnList/index.vue'
  import LevelList from '../LevelList/index.vue'
  import { ref, onMounted } from 'vue'
  import type { TabsPaneContext } from 'element-plus'
  import SourceList from '@/components/pages/param-set/ordet-set/source/Table.vue'
  import WarrantyCategoryList from './components/warranty-category/List.vue'

  const activeName = ref('team')

  const teamList = ref()
  const warnList = ref()
  const levelList = ref()

  // 质保类别列表组件实例
  const warrantyCategoryListInstance = ref<InstanceType<typeof WarrantyCategoryList> | null>(null)

  // 工单来源列表组件实例
  const sourceListInstance = ref<InstanceType<typeof SourceList> | null>(null)

  // 导航切换
  const switchTabs = (tab: TabsPaneContext) => {
    switch (tab.props.name) {
      case 'team':
        teamList.value.getList()
        break
      case 'warn':
        warnList.value.getList()
        break
      case 'level':
        levelList.value.getList()
        break
      case 'source':
        if (sourceListInstance.value) {
          sourceListInstance.value.getList()
        }
        break
      case 'warrantyCategory':
        if (warrantyCategoryListInstance.value) {
          warrantyCategoryListInstance.value.getList()
        }
    }
  }

  // 获取客服列表
  const getTeamList = () => {
    teamList.value.getList()
  }
  onMounted(() => {
    getTeamList()
  })
  defineExpose({ getTeamList })
</script>

<style scoped lang="scss">
  @import '../../index.scss';
</style>
